<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="container"></div>



<script type="text/javascript">
  window._AMapSecurityConfig = {
    securityJsCode: "4b4ad3421c427bf78cb8242ccf305d69",
  };
</script>
<script src="https://webapi.amap.com/loader.js"></script>
<script type="text/javascript">

  var map
  AMapLoader.load({
    key: "8d9533cc932512c8594c15da3bfa18f3", //申请好的Web端开发者 Key，调用 load 时必填
    version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
  })
    .then((AMap) => {
      map = new AMap.Map("container");
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
</script>

<script>
  var port

  // h5接收传递来的端口
  window.onmessage = (event) => {
    if (event.data === 'message_port') {
      // event.data 是原生端传递的名称
      port = event.ports[0] // 这才是端口  存到全局
      // 接收原生端发过来的消息
      onNativeMessage()
      // alert('拿到了')
      // 给原生端发送消息
      sendMessage({
        type: 'alert',
        value: '这是h5给原生端发送的消息'
      })

    }
  }

  // 发送消息  只能传递字符串
  function sendMessage(obj) {
    if (port) {
      // 有端口了才发送
      if (typeof obj !== 'string') {
        port.postMessage(JSON.stringify(obj))
      } else {
        port.postMessage(obj)
      }

    }
  }

  // 接收原生端发送的消息
  function onNativeMessage() {
    if (port) {
      port.onmessage = (event) => {
        let res = event.data
        if (typeof res === 'string') {
          res = JSON.parse(res)
        }
        // alert(event.data)
        // 拿到的位置设置给地图
        map.setCenter([
          res.longitude,
          res.latitude
        ])
        map.setZoom(13)
      }
    }
  }


</script>

</body>
</html>